<template>
	<input
		@input="valueHandler('input', $event)"
		@focus="valueHandler('focus', $event)"
		@blur="valueHandler('blur', $event)"
		@confirm="valueHandler('confirm', $event)"
		:value="defaultValue"
		:placeholder="placeholder"
		:maxlength="maxlength"
		:type="type"
		:auto-focus="autofocus"
		:disabled="disabled"
		:password="password"
		class="input"/>
</template>

<script>
	export default {
		props: {
			defaultValue: {
				type: String,
				default: ''
			},
			type: { // number、idcard、digit
				type: String,
				default: 'text'
			},
			maxlength: {
				type: String,
				default: '50'
			},
			placeholder: {
				type: String,
				default: ''
			},
			autofocus: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			password: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			valueHandler(type, event) {
				let value = event.target.value
				if(value && typeof value === 'string') {
					event.target.value = value.trim()
				}
				this.$emit(type, event)
			}
		},
	}
</script>

<style>
	.input {
		width: 100%;
		font-size: 28upx;
	}
</style>
